<template>
  <div class="consanguinity">
    <p class="c-bodey">
      <span class="c-span"></span> 数据血缘
      <span class="c-spanr">
        <img src="../../../img/Color Overlay.png" alt="" />
      </span>
    </p>

    <div id="consang"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initEchart();
  },

  methods: {
    initEchart() {
      const data = {
        name: "",
        children: [
          {  name: "长江流域企业相关标准数据",
            children: [
              { name: "江苏省-矿山安全生产风险监测 预警系统-煤矿基本信息", value: 1616 },
              { name: "应急管理部-长江经济带-尾矿库信息", value: 1027 },
              { name: "四川省-长江流域化工企业名录", value: 3891 },
              {
                name: "四川省-搬迁改造城镇人口密集区大型危险化学品生产企业名录",
                children: [
                  { name: "四川省-化工园区名录", value: 593 },
                  { name: "长江流域化工园区名录", value: 330 },
                ],
              },
              { name: "四川省-长江流域通过认定的化工园区", value: 843 },
              { name: "江苏省-危险化学品行政许可与安全监管系统-安全许可证书信息", value: 1554 },
              { name: "江苏省-矿山安全生产风险监测预警系统-尾矿库基础信息", value: 970 },
              { name: "生态环境部-城镇污水处理厂基本信息", value: 13896 },
              
            ],
          },
          
        ],
      };

      var myecart = echarts.init(document.getElementById("consang"));
      myecart.setOption(
         {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove",
          },
          legend: {
        
            left: "3%",
            orient: "vertical",
            data: [
              {
                name: "tree1",
                icon: "rectangle",
              },
              {
                name: "tree2",
                icon: "rectangle",
              },
            ],
            borderColor: "#c23531",
          },
          series: [
            {
              type: "tree",
              name: "tree1",
              data: [data],
              top: "5%",
              left: "7%",
              bottom: "2%",
              right: "40%",
              symbolSize: 7,
              label: {
                position: "left",
                verticalAlign: "middle",
                align: "right",
              },
              leaves: {
                label: {
                  position: "right",
                  verticalAlign: "middle",
                  align: "left",
                },
              },
              emphasis: {
                focus: "descendant",
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750,
            },
          ],
        })
    },
  },
};
</script>

<style scoped>
.consanguinity {
  padding: 20px;
  background-color: #fff;
}
.c-bodey {
  margin: 14px 0 15px 0;
  font-size: 18px;
  margin-top: 20px;
  font-weight: 700;
}
.c-span {
  display: inline-block;
  width: 5px;
  line-height: 20px;
  height: 15px;
  margin-right: 8px;
  border-radius: 3px;
  /* color: #000000 ; */
  background: #3272ef;
}
.c-spanr {
  margin-left: 10px;
}
.c-spanr > img {
  display: inline-block;
  border: 1px dashed rgb(218, 212, 212);
  width: 90%;
  float: right;
  margin-top: 10px;
}
#consang {
  height: 656px;
  background-color: #f6faff;
}
</style>
